<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>清除子级元素浮动对父级元素造成的影响</title>
		<style>
			.parent {
				width: 960px;
				margin: 0 auto;
				border: 5px solid black;

				/*
					1. 给父级设置高度 扩展性不好
				*/
				/*height: 200px;*/

				/*
					2. ie6, ie7不支持, margin: auto; 失效
				*/
				/*display: inline-block;*/
				
				/*
					3. margin: auto; 失效
				*/
				/*float: left;*/
				
				/* 也可以 */
				/*position: absolute;*/

				/*
					4. br标签清浮动, 不符合w3c推荐的结构, 行为, 样式三者相分离的思想
				*/

				/*
					6 overflow: hidden;
					需要设置 width 或者 zoom来兼容ie6, 7
				*/
				/*overflow: hidden;*/

				/*
					7: 通过伪元素选择器清浮动;
				*/
				zoom: 1;
			}

			.parent::after {
				content: "";
				display: block;
				clear: both;
			}
			

			.child {
				width: 200px;
				height: 200px;
				background: red;
				float: right;
			}

			/*
				5. 在ie6下有最小19px的bug, 解决完后会有2px的bug
			*/
			/*.clear {
				clear: both;
			}*/

		</style>
	</head>
	<body>

		<div class="parent">
			<div class="child"></div>
			<!-- <br clear="all"> -->

			<!-- <div class="clear"></div> -->
		</div>
		
	</body>
</html>